<template>
    <div class="container">
        <div class="search-input" style="margin: 10px">
            <el-input v-model="input" placeholder="请输入用户ID" style="width: 200px;margin-right: 10px"></el-input>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button type="info" @click="getOrderInfo()">恢复</el-button>
        </div>
        <el-table
        :data="OrderData"
        border
        style="width: 100%">
            <el-table-column label="房间号" prop="roomId"></el-table-column>
            <el-table-column label="房间类型" prop="roomType"></el-table-column>
            <el-table-column label="用户ID" prop="id"></el-table-column>
            <el-table-column label="住户姓名" prop="userName"></el-table-column>
            <el-table-column label="入住时间" prop="checkInTime"></el-table-column>
            <el-table-column label="退房时间" prop="checkOutTime"></el-table-column>
            <el-table-column label="费用" prop="total"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { requestOrderInfo, requestOrderInfoByTel } from '../../../api';

    export default {
        name: 'orderAndCharge',
        data(){
            return {
                tableData:[],
                OrderData: [],
                input:""
            }
        },
        created() {
            this.getOrderInfo();
        },
        methods:{
            async getOrderInfo(){
                let json = {}
                const res = await requestOrderInfo(json);
                console.log(res);
                this.OrderData = res;
                this.tableData=res;
                this.input = '';
                console.log(this.OrderData)
            },
            async search(){
                this.OrderData = this.tableData.filter(item=>item.id===parseInt(this.input))
            }
        }
    };
</script>

<style scoped>

</style>